<template>
    <div class="exper-image-wrapper">
        <span class="label">课件：</span
        ><Select filterable
            v-model="selectExpId"
            placeholder="请选择课件"
            class="exp-select"
            filterable
            @on-change="querytempByID"
        >
            <Option
                v-for="value in expList"
                :value="`${value.ecid}@${value.envTempId}`"
                :key="value.ecid"
                :title="value.ecname"
                >{{ value.ecname }}</Option
            >
        </Select>
    </div>
</template>
<script>
import { getExpListNotPrivate } from '@/api/selfStudy/courseExp.js';
import { getTempInfpByID } from '@/api/proTemplate.js';
export default {
    name: 'ExperTemplate',
    data() {
        return {
            expList: [],
            selectExpId: ''
        };
    },
    computed: {},
    mounted() {
        this.getExperData();
    },
    methods: {
        // 课件列表
        getExperData() {
            let params = {
                pageIndex: 1,
                pageSize: 100000,
                order: 'desc',
                sortBy: 'createTime',
                expType: 0
            };
            getExpListNotPrivate(params)
                .then((data) => {
                    if (data.code == 1) {
                        let attribute = data.data;
                        let items = attribute.items;
                        this.expList = items;
                    } else {
                    }
                })
                .catch((err) => {});
        },
        querytempByID(key) {
            let id = key.split('@')[1];
            getTempInfpByID(id)
                .then((res) => {
                    if (res.data.code === 1) {
                        if (!res.data.data.name) {
                            this.$Message.error('没有查询到模板信息,请重新选择');
                            return;
                        }
                        this.$emit('on-select', {
                            id: id,
                            name: res.data.data.name
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>
<style scoped>
.w100 {
    width: 100px;
}
.no-radius {
    border-radius: 0;
}
.exper-image-wrapper {
    display: flex;
}
.exper-image-wrapper .label {
    flex: none;
}
.exper-image-wrapper .exp-select {
    flex: auto;
}
</style>
